Highcharts হলো একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশন করার জন্য ব্যবহৃত হয়। Angular অ্যাপ্লিকেশনগুলির মধ্যে Highcharts ইন্টিগ্রেট করা একটি শক্তিশালী উপায় ডেটা ভিজ্যুয়ালাইজেশন এবং ইন্টারঅ্যাকটিভ চার্ট তৈরি করার জন্য। Angular এবং Highcharts একত্রে ব্যবহৃত হলে আপনি আপনার অ্যাপ্লিকেশনে ডাইনামিক, রেসপন্সিভ এবং কাস্টমাইজেবল চার্ট ইনক্লুড করতে পারেন।

এই টিউটোরিয়ালে আমরা দেখব কিভাবে Angular প্রজেক্টে Highcharts লাইব্রেরি ইন্টিগ্রেট করা যায় এবং সেটআপ করা যায়।

Highcharts লাইব্রেরি ইনস্টল করা

Angular অ্যাপ্লিকেশনে Highcharts লাইব্রেরি ব্যবহার করতে হলে প্রথমে আপনাকে এটি ইনস্টল করতে হবে। আপনি npm ব্যবহার করে Highcharts লাইব্রেরি এবং Highcharts Angular র‍্যাপার ইনস্টল করতে পারেন।

Highcharts লাইব্রেরি ইনস্টল করুন:

npm install highcharts --save

এটি Highcharts লাইব্রেরিটি আপনার প্রজেক্টে ইনস্টল করবে। তবে Angular এর জন্য একটি র‍্যাপার লাইব্রেরি highcharts-angular ব্যবহার করা সবচেয়ে সহজ। এটি Highcharts এবং Angular এর মধ্যে যোগাযোগ তৈরি করে।

Highcharts Angular র‍্যাপার ইনস্টল করুন:

npm install highcharts-angular --save

প্রয়োজনীয় মডিউল ইমপোর্ট করা

Highcharts এবং Highcharts Angular র‍্যাপার ইনস্টল করার পর, আপনার অ্যাপ্লিকেশনটির মডিউলে (যেমন app.module.ts) Highcharts এবং Highcharts Angular এর মডিউল ইমপোর্ট করতে হবে।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// Highcharts মডিউল এবং HighchartsAngular র‍্যাপার ইমপোর্ট করা
import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule  // HighchartsChartModule যোগ করা
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এটি নিশ্চিত করবে যে আপনার অ্যাপ্লিকেশনে Highcharts কম্পোনেন্ট ব্যবহার করা যাবে।

বেসিক Highcharts চার্ট তৈরি করা

এখন Highcharts অ্যাপ্লিকেশনটির মধ্যে চার্ট তৈরি করার জন্য প্রস্তুত। চলুন একটি বেসিক চার্ট তৈরি করি।

1. app.component.ts ফাইলে Highcharts এর ডেটা কনফিগারেশন এবং চার্টের অপশন সেট করুন:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;  // Highcharts ব্যবহার করার জন্য
  chartOptions = {
    chart: {
      type: 'line'  // এখানে লাইন চার্ট ব্যবহার করা হয়েছে
    },
    title: {
      text: 'উদাহরণস্বরূপ লাইন চার্ট'
    },
    series: [{
      name: 'Sales',
      data: [1, 2, 3, 4, 5, 6, 7, 8]
    }]
  };
}

2. app.component.html ফাইলে Highcharts কম্পোনেন্ট যোগ করুন:

<div style="height: 400px;">
  <highcharts-chart
    [Highcharts]="Highcharts"
    [options]="chartOptions"
    style="width: 100%; height: 100%; display: block;">
  </highcharts-chart>
</div>

এটি একটি line chart তৈরি করবে যেখানে series এর মাধ্যমে ডেটা প্রদান করা হয়েছে। আপনি এখানে ডেটা কাস্টমাইজ করতে পারেন আপনার প্রয়োজন অনুযায়ী।

Highcharts এর সাথে ডেটা কনফিগারেশন

Highcharts এর সাথে ডেটা কনফিগারেশন অনেক গুরুত্বপূর্ণ, কারণ এটি নির্ধারণ করে আপনার চার্টের ভিজ্যুয়াল কীভাবে প্রদর্শিত হবে। আপনি চার্টের প্রকার, টাইটেল, এক্সিস, সিরিজ ইত্যাদি কনফিগার করতে পারেন।

উদাহরণ:

chartOptions = {
  chart: {
    type: 'column'  // কলাম চার্ট
  },
  title: {
    text: 'বিক্রয়ের পরিসংখ্যান'
  },
  xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May']
  },
  yAxis: {
    title: {
      text: 'মুল্য (মিলিয়ন $)'
    }
  },
  series: [{
    name: '2024',
    data: [5, 6, 8, 9, 10]
  }]
};

এখানে এক্সিস কাস্টমাইজ করা হয়েছে এবং categories এর মাধ্যমে মাসগুলো দেয়া হয়েছে।

সারাংশ

Highcharts লাইব্রেরি ইন্টিগ্রেট করা Angular অ্যাপ্লিকেশনে অত্যন্ত সহজ এবং কার্যকরী। আপনি highcharts-angular র‍্যাপারের মাধ্যমে Highcharts লাইব্রেরি সহজে আপনার Angular অ্যাপ্লিকেশনে ব্যবহার করতে পারেন। ডেটা কনফিগারেশন এবং চার্টের অপশন কাস্টমাইজ করে আপনি ইন্টারঅ্যাকটিভ, ডাইনামিক এবং রেসপন্সিভ চার্ট তৈরি করতে পারবেন।

Highcharts একটি শক্তিশালী JavaScript লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Highcharts ব্যবহার করতে, আপনাকে এটি আপনার Angular বা অন্য JavaScript প্রজেক্টে ইনস্টল করতে হবে। npm (Node Package Manager) ব্যবহার করে Highcharts লাইব্রেরি ইনস্টল করা অত্যন্ত সহজ। এখানে Highcharts ইনস্টল করার ধাপগুলো বিস্তারিতভাবে দেয়া হলো।

1. Highcharts ইনস্টল করা

Angular বা অন্য JavaScript প্রজেক্টে Highcharts ইনস্টল করতে, প্রথমে npm ব্যবহার করে Highcharts প্যাকেজটি ইনস্টল করুন। টার্মিনাল বা কমান্ড প্রম্পটে নিচের কমান্ডটি রান করুন:

npm install highcharts --save

এই কমান্ডটি Highcharts প্যাকেজটি আপনার প্রজেক্টে ইনস্টল করবে এবং package.json ফাইলে ডিপেনডেন্সি হিসেবে যোগ করবে।

• --save ফ্ল্যাগটি আপনার ডিপেনডেন্সি তালিকায় Highcharts কে যুক্ত করে, তবে আধুনিক npm সংস্করণে এটি স্বয়ংক্রিয়ভাবে করা হয়।

2. Highcharts Angular র‍্যাপার ইনস্টল করা (optional)

যদি আপনি Angular এর সাথে Highcharts ব্যবহার করতে চান, তাহলে আপনাকে highcharts-angular নামক একটি Angular র‍্যাপার ইনস্টল করতে হবে। এটি Angular এর মধ্যে Highcharts ইন্টিগ্রেশন সহজ করে তোলে। এটি ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

npm install highcharts-angular --save

এই কমান্ডটি Highcharts এর জন্য Angular র‍্যাপার প্যাকেজ ইনস্টল করবে।

3. Highcharts এবং Angular র‍্যাপার মডিউল ইমপোর্ট করা

Highcharts এবং highcharts-angular ইন্সটল করার পর, আপনাকে Angular মডিউলে Highcharts এবং Highcharts Angular র‍্যাপার ইমপোর্ট করতে হবে।

প্রথমে, আপনার Angular অ্যাপের app.module.ts ফাইলে প্রয়োজনীয় মডিউলগুলো ইমপোর্ট করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HighchartsChartModule } from 'highcharts-angular'; // Import Highcharts Angular module

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HighchartsChartModule],  // Add Highcharts module here
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. Highcharts কম্পোনেন্টে ব্যবহার করা

Highcharts লাইব্রেরি এবং Angular র‍্যাপার সঠিকভাবে ইনস্টল ও ইমপোর্ট করার পর, আপনি আপনার Angular কম্পোনেন্টে Highcharts ব্যবহার করতে পারবেন। উদাহরণস্বরূপ:

1. app.component.ts ফাইলে Highcharts ব্যবহার করা:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';  // Import Highcharts library

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Sample Highcharts in Angular'
    },
    series: [{
      name: 'Data Series',
      data: [1, 2, 3, 4, 5]
    }]
  };
}

2. app.component.html ফাইলে Highcharts চার্ট রেন্ডার করা:

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

এই কোডটি Angular কম্পোনেন্টে Highcharts চার্ট তৈরি করবে।

সারাংশ

Highcharts লাইব্রেরি npm এর মাধ্যমে সহজেই ইনস্টল করা যায় এবং Angular অ্যাপ্লিকেশনের সাথে ইন্টিগ্রেট করা সম্ভব। Highcharts-এর সাহায্যে আপনি খুব সহজেই ইন্টারেক্টিভ এবং রেসপন্সিভ চার্ট তৈরি করতে পারবেন। highcharts-angular র‍্যাপার ব্যবহার করলে Angular অ্যাপ্লিকেশনের মধ্যে Highcharts এর ইন্টিগ্রেশন আরও সহজ হয়ে যায়।

Highcharts একটি শক্তিশালী জাভাস্ক্রিপ্ট লাইব্রেরি যা ডেটা ভিজ্যুয়ালাইজেশনের জন্য ব্যবহৃত হয়। Angular এ Highcharts ব্যবহার করার জন্য একটি অফিসিয়াল র‍্যাপার রয়েছে যার মাধ্যমে Highcharts কম্পোনেন্টগুলো Angular অ্যাপ্লিকেশনগুলোর মধ্যে সহজে ইন্টিগ্রেট করা যায়। এই র‍্যাপারটি highcharts-angular নামে পরিচিত।

Highcharts Angular র‍্যাপার ইনস্টল করতে নিচের ধাপগুলো অনুসরণ করুন।

1. Highcharts এবং highcharts-angular ইনস্টল করা

প্রথমে, আপনাকে Highcharts এবং highcharts-angular প্যাকেজ দুটি ইনস্টল করতে হবে। এই প্যাকেজগুলো ইনস্টল করতে npm ব্যবহার করুন।

প্রজেক্টের ডিরেক্টরিতে গিয়ে নিচের কমান্ডটি চালান:

npm install highcharts highcharts-angular --save

এটি আপনার package.json ফাইলে প্যাকেজগুলো যুক্ত করবে এবং node_modules/ ফোল্ডারে লাইব্রেরি ইনস্টল করবে।

2. Highcharts মডিউল ইমপোর্ট করা

Highcharts Angular র‍্যাপার ব্যবহার করতে হলে আপনাকে HighchartsChartModule মডিউলটি আপনার Angular মডিউলে ইমপোর্ট করতে হবে। সাধারণত এটি app.module.ts ফাইলে করা হয়।

এটি করার জন্য, প্রথমে highcharts-angular থেকে HighchartsChartModule ইমপোর্ট করুন:

import { HighchartsChartModule } from 'highcharts-angular';

এরপর, imports অ্যারে তে HighchartsChartModule যোগ করুন:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HighchartsChartModule  // Highcharts module ইমপোর্ট করা হয়েছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Highcharts কম্পোনেন্ট ব্যবহার করা

এখন আপনি Angular কম্পোনেন্টে Highcharts ব্যবহার করতে পারবেন। একটি নতুন কম্পোনেন্ট তৈরি করে সেখানে Highcharts ইন্টিগ্রেট করা যাবে।

উদাহরণস্বরূপ, একটি সিম্পল line chart তৈরি করার জন্য আপনার কম্পোনেন্ট কোড হবে:

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Highcharts Example'
    },
    series: [{
      name: 'Example Series',
      data: [1, 2, 3, 4, 5]
    }]
  };
}

এখানে Highcharts ইমপোর্ট করা হয়েছে এবং chartOptions নামের একটি ভেরিয়েবলে চার্টের কনফিগারেশন সংরক্ষণ করা হয়েছে।

4. কম্পোনেন্ট টেমপ্লেটে Highcharts ব্যবহার করা

এখন আপনার কম্পোনেন্ট টেমপ্লেটে highcharts-chart ট্যাগ ব্যবহার করতে হবে। এটি সেই কম্পোনেন্টের জন্য চার্টটি রেন্ডার করবে।

app.component.html ফাইলের মধ্যে এটি করুন:

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

এখানে Highcharts এবং chartOptions প্রপ্স হিসেবে পাস করা হয়েছে, যা পূর্বে TypeScript ফাইলে সংজ্ঞায়িত করা হয়েছিল।

5. অ্যাপ্লিকেশন রান করা

এখন, প্রজেক্টটি রান করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

ng serve

আপনার অ্যাপ্লিকেশনটি http://localhost:4200/ এ খোলার পর আপনি Highcharts এর line chart দেখতে পাবেন।

সারাংশ

Highcharts Angular র‍্যাপার ইনস্টল এবং কনফিগার করার মাধ্যমে আপনি Angular অ্যাপ্লিকেশনে Highcharts চার্ট সহজে ইন্টিগ্রেট করতে পারবেন। highcharts এবং highcharts-angular প্যাকেজগুলো ইনস্টল করার পর, Highcharts কম্পোনেন্ট ব্যবহার করতে পারবেন এবং বিভিন্ন ধরনের চার্ট যেমন লাইন, বার, পাই ইত্যাদি তৈরি করতে পারবেন।

Angular অ্যাপ্লিকেশনে বিভিন্ন ধরনের কার্যকারিতা যোগ করতে প্রয়োজনীয় মডিউল ইমপোর্ট করা হয়। Angular একটি মডিউলার আর্কিটেকচার অনুসরণ করে, যেখানে প্রতিটি কম্পোনেন্ট, সার্ভিস, ডিরেকটিভ, বা পাইপ একটি নির্দিষ্ট মডিউলের অংশ হিসেবে কাজ করে। মডিউল ইমপোর্ট করার মাধ্যমে আপনি Angular এর বিভিন্ন ফিচার ব্যবহার করতে সক্ষম হন।

এখানে Angular অ্যাপ্লিকেশনে প্রয়োজনীয় মডিউল ইমপোর্ট করার প্রক্রিয়া বিস্তারিতভাবে আলোচনা করা হলো।

1. প্রথমে মডিউল তৈরি করা

প্রথমে, আপনি যে মডিউলটি ব্যবহার করতে চান, সেটি আপনার প্রজেক্টে তৈরি থাকতে হবে। মডিউল তৈরি করতে Angular CLI এর ng generate module কমান্ডটি ব্যবহার করুন:

ng generate module module-name

এটি একটি নতুন মডিউল তৈরি করবে এবং সেই মডিউলটির জন্য একটি TypeScript ফাইল তৈরি করবে।

2. মডিউল ইমপোর্ট করার প্রক্রিয়া

আপনার অ্যাপ্লিকেশনের যে অংশে মডিউলটি ব্যবহার করতে চান, সেখানে ওই মডিউলটি ইমপোর্ট করতে হবে। সাধারণত, এটি app.module.ts ফাইলে করা হয়, যা মূল মডিউল হিসেবে কাজ করে।

উদাহরণস্বরূপ, যদি আপনি FormsModule বা HttpClientModule ব্যবহার করতে চান, তাহলে এগুলি app.module.ts ফাইলে ইমপোর্ট করতে হবে।

3. মডিউল ইমপোর্ট করার উদাহরণ

• FormsModule ইমপোর্ট করা (ডেটা বাইন্ডিং এবং ফর্ম ব্যবহারের জন্য):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';  // Importing FormsModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule  // Adding FormsModule to imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• HttpClientModule ইমপোর্ট করা (HTTP রিকোয়েস্ট এবং API কলের জন্য):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';  // Importing HttpClientModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule  // Adding HttpClientModule to imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• RouterModule ইমপোর্ট করা (অ্যাপ্লিকেশনে রাউটিং ব্যবহারের জন্য):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';  // Importing RouterModule

import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', component: AppComponent }
];

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)  // Adding RouterModule with routes to imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. অন্য মডিউল ইমপোর্টের উদাহরণ

আপনি যদি বিভিন্ন মডিউল ব্যবহার করতে চান, তবে সেগুলোরও ইমপোর্ট করতে হবে। উদাহরণস্বরূপ:

• CommonModule: যদি আপনি Angular Elements বা লোডেবল মডিউল ব্যবহার করতে চান, তবে CommonModule ব্যবহার করতে হবে।
• ReactiveFormsModule: Angular Reactive Forms ব্যবহারের জন্য।
• MatButtonModule, MatInputModule: Material Design কম্পোনেন্ট ব্যবহার করার জন্য।

5. মডিউলকে providers এবং declarations অংশে যোগ করা

কোনও মডিউল যদি নির্দিষ্ট সার্ভিস, ডিরেকটিভ বা পাইপ অন্তর্ভুক্ত করে, তবে আপনি সেগুলোকেও উপযুক্তভাবে providers এবং declarations অংশে যুক্ত করবেন। উদাহরণস্বরূপ:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],  // Providers can be added here for services
  bootstrap: [AppComponent]
})
export class AppModule { }

সারাংশ

Angular অ্যাপ্লিকেশনে প্রয়োজনীয় মডিউল ইমপোর্ট করা খুবই গুরুত্বপূর্ণ, কারণ এটি অ্যাপ্লিকেশনের বিভিন্ন কার্যকারিতা এবং ফিচারকে যুক্ত করে। আপনি app.module.ts ফাইলে import স্টেটমেন্ট ব্যবহার করে বিভিন্ন মডিউল, ডিরেকটিভ এবং সার্ভিস ইমপোর্ট করতে পারবেন। মডিউলগুলো ইমপোর্ট করার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের কার্যক্ষমতা বৃদ্ধি করতে পারেন।

Highcharts এর সাথে Angular ইন্টিগ্রেট করার পর, আপনি সহজেই বেসিক চার্ট তৈরি করতে পারেন। এখানে আমরা একটি বেসিক Highcharts চার্ট তৈরি করতে Angular কম্পোনেন্ট তৈরি করার প্রক্রিয়া দেখব।

ধাপ ১: Highcharts এবং Highcharts Angular র‍্যাপার ইনস্টল করা

প্রথমে, আপনাকে Highcharts এবং Highcharts Angular র‍্যাপার ইনস্টল করতে হবে। Angular প্রজেক্টের মধ্যে এই প্যাকেজগুলো ইনস্টল করতে নিচের কমান্ডগুলি ব্যবহার করুন:

npm install highcharts --save
npm install highcharts-angular --save

এটি Highcharts লাইব্রেরি এবং Highcharts Angular র‍্যাপার ইনস্টল করবে, যা Angular কম্পোনেন্টে Highcharts ব্যবহার করতে সাহায্য করবে।

ধাপ ২: কম্পোনেন্ট তৈরি করা

Highcharts চার্ট তৈরি করতে একটি নতুন কম্পোনেন্ট তৈরি করতে হবে। কম্পোনেন্ট তৈরি করতে Angular CLI কমান্ড ব্যবহার করুন:

ng generate component chart

এটি chart নামে একটি নতুন কম্পোনেন্ট তৈরি করবে এবং প্রয়োজনীয় ফাইলগুলো তৈরি করবে।

ধাপ ৩: প্রয়োজনীয় মডিউল ইমপোর্ট করা

এখন, highcharts-angular মডিউলটিকে app.module.ts ফাইলে ইমপোর্ট করতে হবে, যাতে আমরা আমাদের অ্যাপ্লিকেশনে Highcharts ব্যবহার করতে পারি।

import { HighchartsChartModule } from 'highcharts-angular';

@NgModule({
  declarations: [
    AppComponent,
    ChartComponent
  ],
  imports: [
    BrowserModule,
    HighchartsChartModule  // এখানে HighchartsChartModule ইমপোর্ট করা হচ্ছে
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ধাপ ৪: কম্পোনেন্টে Highcharts চার্ট কনফিগার করা

এখন chart.component.ts ফাইলে Highcharts চার্ট কনফিগার করতে হবে। এটি সম্পূর্ণ চার্টের কনফিগারেশন প্রদান করবে যেমন: চার্টের ধরন, ডেটা, এক্সিস, এবং অন্যান্য অপশন।

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent {
  Highcharts = Highcharts;  // Highcharts ইনিশিয়ালাইজ করা
  chartOptions = {          // চার্ট কনফিগারেশন
    chart: {
      type: 'line'         // এখানে 'line' চার্ট টাইপ ব্যবহার করা হচ্ছে
    },
    title: {
      text: 'BASIC Highcharts Example'  // চার্টের শিরোনাম
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']  // এক্স-অ্যাক্সিসের ডেটা
    },
    yAxis: {
      title: {
        text: 'Values'  // ওয়াই-অ্যাক্সিসের শিরোনাম
      }
    },
    series: [{
      name: 'Data Series',
      data: [1, 3, 2, 4, 5, 6, 7]  // ডেটা সিরিজ
    }]
  };
}

ধাপ ৫: কম্পোনেন্টের টেমপ্লেট তৈরি করা

এখন chart.component.html ফাইলে Highcharts কম্পোনেন্ট ট্যাগ ব্যবহার করতে হবে যাতে চার্ট রেন্ডার হয়।

<div style="width: 100%; height: 400px;">
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

এই টেমপ্লেটটি Highcharts কম্পোনেন্টকে রেন্ডার করবে এবং আগের ধাপে দেয়া কনফিগারেশন অনুযায়ী চার্ট প্রদর্শন করবে।

ধাপ ৬: অ্যাপ্লিকেশন রান করা

এখন, Angular অ্যাপ্লিকেশন চালু করার জন্য নিচের কমান্ডটি রান করুন:

ng serve

এরপর ব্রাউজারে গিয়ে http://localhost:4200 তে গিয়ে আপনি আপনার বেসিক Highcharts চার্টটি দেখতে পাবেন।

সারাংশ

এই প্রক্রিয়ায়, Angular CLI ব্যবহার করে একটি নতুন কম্পোনেন্ট তৈরি করা হয়েছে এবং Highcharts এর সাহায্যে বেসিক লাইন চার্ট কনফিগার করা হয়েছে। Highcharts Angular র‍্যাপার ব্যবহার করার মাধ্যমে Angular প্রজেক্টে চার্ট যুক্ত করা সহজ এবং কার্যকর হয়েছে। এখন আপনি এই চার্টে ডেটা, এক্সিস এবং অন্যান্য কনফিগারেশন সহজে পরিবর্তন করতে পারবেন।